<template>
    <div class="mod-config">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <b>数据源</b>
              <el-button style="float: right;" type="primary" icon="el-icon-plus" @click="cleanData" circle title="新增"></el-button>
            </div>
            <div v-for="(item,index) in sour" :key="index" class="text item">
              <span>
                {{ item }}
              </span>
              <div style="float: right;padding-right: 20px;">
                <el-button icon="el-icon-info" circle title="详情" @click="checkDetail(index)"></el-button>
                <el-button icon="el-icon-edit"   @click="handlerEdit(item)" circle title="编辑"></el-button>
                <el-button icon="el-icon-delete" circle title="删除" @click="deleteHandle(item)"></el-button>
              </div>
            </div>
          </el-card>
        </el-col>
        <!-- 新增 -->
        <el-col :span="16">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <b>新增数据源</b>
            </div>
            <div class="text item" style="padding-right: 20px;">
              <el-form>
                <el-form-item label="数据源类型">
                  <el-select v-model="dataForm.type">
                    <el-option v-for="item in selectorList" :value="item.value" :label="item.label" :key="item.value"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="新建数据源名称">
                  <el-input v-model="dataForm.name"></el-input>
                </el-form-item>
                <el-form-item label="Elasticsearch Server" v-if="dataForm.type == 'Elasticsearch'">
                  <el-input v-model="dataForm.sever"></el-input>
                </el-form-item>

                <el-form-item label="UserName (Optional)" v-if="dataForm.type == 'Elasticsearch'">
                  <el-input v-model="dataForm.userName"></el-input>
                </el-form-item>
                <el-form-item label="Password (Optional)" v-if="dataForm.type == 'Elasticsearch'">
                  <el-input v-model="dataForm.password"></el-input>
                </el-form-item>
                <el-form-item label="Charset (Default: utf-8)" v-if="dataForm.type == 'Elasticsearch'">
                  <el-input v-model="dataForm.charset"></el-input>
                </el-form-item>
                <el-form-item label="Solr服务" v-if="dataForm.type == 'Solr'">
                  <el-input v-model="dataForm.solr"></el-input>
                </el-form-item>
                <el-form-item label="是否使用连接池" v-if="dataForm.type == 'Solr'">
                  <el-input v-model="dataForm.solr"></el-input>
                </el-form-item>
                <el-form-item label="数据源聚合(必须Solr5.0+)" v-if="dataForm.type == 'Solr'">
                  <el-input v-model="dataForm.solr"></el-input>
                </el-form-item>
                <el-form-item label="Saiku Server (http://domain:port)" v-if="dataForm.type == 'saiku'">
                  <el-input v-model="dataForm.solr"></el-input>
                </el-form-item>
                <el-form-item label="User Name (for Saiku Server)" v-if="dataForm.type == 'saiku'">
                  <el-input v-model="dataForm.userName"></el-input>
                </el-form-item>
                <el-form-item label="Password" v-if="dataForm.type == 'saiku'">
                  <el-input v-model="dataForm.password"></el-input>
                </el-form-item>
                <el-form-item label="文件所在目录" v-if="dataForm.type == 'TextFile'">
                  <el-input v-model="dataForm.password"></el-input>
                </el-form-item>

                <el-form-item label="驱动类 (如: com.mysql.jdbc.Driver) *" v-if="dataForm.type == 'jdbc'">
                  <el-input v-model="dataForm.driver"></el-input>
                </el-form-item>
                <el-form-item label="连接串 (如: jdbc:mysql://hostname:port/db) *" v-if="dataForm.type == 'jdbc'">
                  <el-input v-model="dataForm.jdbcurl"></el-input>
                </el-form-item>
                <el-form-item label="数据库用户名 *" v-if="dataForm.type == 'jdbc'">
                  <el-input v-model="dataForm.userName"></el-input>
                </el-form-item>
                <el-form-item label="数据库密码" v-if="dataForm.type == 'jdbc'">
                  <el-input v-model="dataForm.password"></el-input>
                </el-form-item>
                <el-form-item label="是否使用连接池" v-if="dataForm.type == 'jdbc'">
                  <el-radio-group v-model="dataForm.aggregateProvider">
                    <el-radio label="true">是</el-radio>
                    <el-radio label="false">否</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="数据源聚合" v-if="dataForm.type == 'jdbc'">
                  <el-radio-group v-model="dataForm.pooled">
                  <el-radio label="true">是</el-radio>
                  <el-radio label="false">否</el-radio>
                  </el-radio-group>
                </el-form-item>

                <el-form-item label="Kylin Server" v-if="dataForm.type == 'kylin'">
                  <el-input v-model="dataForm.password"></el-input>
                </el-form-item>
                <el-form-item label="User Name (for Kylin Server)" v-if="dataForm.type == 'kylin'">
                  <el-input v-model="dataForm.password"></el-input>
                </el-form-item>
                <el-form-item label="Password" v-if="dataForm.type == 'kylin'">
                  <el-input v-model="dataForm.password"></el-input>
                </el-form-item>
              </el-form>
              <div style="height: 33px;margin-top: 10px;">
                <div style="float: right;">
                  <el-button type="primary" class="filter-item" icon="el-icon-edit"  @click="handleCreate">测试</el-button>
                  <el-button type="success" class="button"  @click="addSourData()">保存</el-button>
                  <el-button type="danger" class="button">取消</el-button>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <!-- 弹窗，查看详情 -->
      <check-detail v-if="detailVisible" ref="detailDialog"></check-detail>
      <!-- 弹窗,测试 -->
      <check-test v-if="testVisible" ref="testDialog"></check-test>
    </div>
</template>

<script>
import {addObj,sourList,getDatasource,updateObj,delAddFeeObj} from '@/api/cboard/cboard'

import CheckDetail from './detail'

import CheckTest from './test'

  export default {
    data(){
      return {
        testVisible: false,
        dataForm: {
          type: '',
          name: '',
          driver:'',
          jdbcurl:'',
          aggregateProvider:'true',
          pooled:'true',
        },
        sour: [],
        CategOptions:[],
        soursOptions: [],
        DatasetOptions:[],
        selectorList: [
          {value: 'Elasticsearch',label: 'Elasticsearch'},
          {value: 'Solr',label: 'Solr'},
          {value: 'saiku',label: 'saiku'},
          {value: 'TextFile',label: 'TextFile'},
          {value: 'jdbc',label: 'jdbc'},
          {value: 'kylin',label: 'kylin'},
        ]
      }
    },
    components: {
      CheckDetail,
        CheckTest
    },
    created(){
        this.getSourList();
    },
    methods: {
        /*添加修改数据源*/
        addSourData() {
            let obj = this.dataForm;
            if(this.dataForm.id!=null){
                this.dataForm.config ='';
                updateObj(obj).then(() => {
                    this.$notify({
                        title: '成功',
                        message: '修改成功',
                        type: 'success',
                        duration: 2000
                    })
                })
            }else {
                addObj(obj).then(() => {
                    this.$notify({
                        title: '成功',
                        message: '创建成功',
                        type: 'success',
                        duration: 2000
                    })
                })
            }

        },
        /*获取数据源*/
        getSourList() {
            sourList().then(response => {
                this.soursOptions = response.data
                let list = []
                this.soursOptions.forEach(item => {
                    list.push(item.name)
                })
                this.sour = list
            })

        },
        handlerEdit(item) {
            getDatasource(item).then(response => {
                this.dataForm  = response.data;
            })
        },
        // 查看数据源详情
        checkDetail(index){
          this.detailVisible = true
          this.$nextTick(() => {
            this.$refs.detailDialog.init(index + 8)
          })
        },
        // 删除数据源
        deleteHandle (item) {
          this.$confirm('是否确认删除名称为' + item, '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(function () {
            return delAddFeeObj(item)
          }).then(data => {
            this.$message.success('删除成功')
            this.getDataList()
          })
        },
        cleanData(){
            this.dataForm = {
                    type: '',
                    name: '',
                    driver:'',
                    jdbcurl:'',
                    aggregateProvider:'true',
                    pooled:'true',
            }
        },
        handleCreate() {
            this.testVisible = true
            this.$nextTick(() => {
                this.$refs.testDialog.init(this.dataForm)
            })
        }
    }
}
</script>
<style lang="scss" scoped>
  .mod-config {
    padding: 10px 15px;
  }
  /deep/ .el-card {
    background-color: #fff;
  }
  /deep/ .el-card__body {
    padding: 0;
    padding-bottom: 20px;
  }
  .box-card .item {
    padding-left: 20px;
    padding-bottom: 10px;
    padding-top: 10px;
    border-bottom: solid 1px #e7e7e7;
  }
</style>
